<template>
	<view class="pages_intelligence">
		<!-- <myTabs :title="title" :isTrue="false" @goBlack="goBlack" :mybackgroundColor="'#fff'"></myTabs> -->
		<view class="pages_mainBox">
			<!-- <image @load="loading" class="bigKhBg" src="/static/img/bigKh.png" mode="widthFix"></image> -->
			<!-- 	<rich-text :nodes="myNodes"></rich-text> -->
			<u-parse @ready="ready" :content="myNodes"></u-parse>
			<view class="pages_mainBoxx">
				<image src="/static/img/numBigIcon.png" @click="isConsult = true"></image>
			</view>
		</view>

		<!-- 咨询服务 -->
		<u-overlay :show="isConsult" @click="isConsult = false">
			<view class="consultBigBox" @click.stop="">
				<view class="consultBox" @click.stop="">

					<image v-if="imgSrc" mode="aspectFill" class="consultBoxBg" :src="`${imgSrc}/welcomeBg.png`">
					</image>
					<view @click.stop="" class="consultBoxHeard">
						咨询服务
					</view>
					<view @click.stop="" class="inputItems">
						<input placeholder="请输入姓名" v-model="form.name" />
					</view>
					<view @click.stop="" class="inputItems ">
						<button class="pages_areaItemsInp" v-if="!form.phone" type="default" open-type="getPhoneNumber"
							@getphonenumber="decryptPhoneNumber">点击授权获取手机号</button>
						<input :disabled="true" v-if="form.phone" :value="form.phone" />
					</view>
					<view @click.stop="goPatch(`/package/citySelection/index?isText=2`)" class="inputItems">
						<span>{{form.city?form.city:'请选择城市'}}</span>
						<image src="/static/img/bottomIcon.png"></image>
					</view>
					<view @click.stop="" class="inputItems">
						<input placeholder="请输入品牌名称" v-model="form.ppname" />
					</view>
					<view @click.stop="ensure" class="consultBoxBotton">服务咨询</view>

				</view>
				<image class="consultBoxCha" @click.stop="isConsult = false" src="/static/img/chaIcon.png"></image>
			</view>

		</u-overlay>
		<!-- 咨询服务 -->
		<u-overlay :show="iswin" @click="iswin = false">
			<view class="winBigBox" @click.stop="">
				<view class="winTopBox">
					<view class="winTopBoxTop">
						<image src="/static/img/duiyeIcon.png"></image>
						<view>提交成功</view>
					</view>
					<view class="winTopBoxBotton">已成功提交咨询，已安排工作人员 跟进，请留意来电～</view>
				</view>
				<view @click.stop="iswin = false" class="winBottonBox">
					好的
				</view>
			</view>
		</u-overlay>
	</view>
</template>

<script>
	import myTabs from "@/components/myTabs/index.vue"
	export default {
		components: {
			myTabs
		},
		data() {
			return {
				myNodes: '',
				form: {
					name: '',
					phone: '',
					city: '',
					ppname: '',
				},
				isConsult: false,
				iswin: false,
				title: '大数据定制',
			}
		},
		onLoad() {
			this.init()
		},
		onShow() {
			let myphone = uni.getStorageSync('phone');
			console.log(myphone)
			if (myphone) {
				this.form.phone = myphone;
			}
		},

		/**
		 * 分享微信好友
		 */
		onShareAppMessage() {
			return {
				title: '加入老谭餐饮情报局看海量餐饮大数据',
				imageUrl: 'https://octopus-wxapp.oss-cn-hangzhou.aliyuncs.com/octopus/yxiao.png',
				path: `/pages/start/index`
			}
		},
		/**
		 * 分享微信朋友圈
		 */
		// onShareTimeline() {
		// 	return {
		// 		title: '加入老谭餐饮情报局看海量餐饮大数据',
		// 	}
		// },
		computed: {
			location() {
				return this.$store.state.location;
			},
			user() {
				return this.$store.state.user;
			},
			imgSrc() {
				return this.$store.state.imgSrc;
			},
			// 
		},
		watch: {
			location: {
				handler(newName, oldName) {
					this.form.city = newName.name;
				},
				immediate: true,
				deep: true
			},
			user: {
				handler(newName, oldName) {
					this.form.phone = newName.phone;
				},
				immediate: true,
				deep: true
			},
		},
		methods: {
			ready() {
				uni.hideLoading()
			},

			init() {
				uni.showLoading({
					title: '加载中',
					mask: true
				})
				this.$api.operateInfo({
					site: 'custom_made'
				}).then(res => {
					if (res.code == 200) {
						let content = res.data.content;
						this.myNodes = content.replace(/\<img/gi, '<img class="myStyle"');

					}
				})
			},
			goPatch(url) {
				uni.navigateTo({
					url
				})
			},
			ensure() {
				uni.showLoading({
					title: '加载中',
					mask: true
				})
				for (let key in this.form) {
					let item = this.form[key];
					if (!item) {

						let text = "";
						if (key == "name") {
							text = '请输入姓名';
						} else if (key == "phone") {
							text = '请获取手机号';
						} else if (key == "city") {
							text = '请选择城市';
						} else if (key == "ppname") {
							text = '请输入品牌名称';
						}
						uni.showToast({
							icon: 'none',
							title: text
						})
						return
					}
				}
				let req = {
					name: this.form.name,
					phone: this.form.phone,
					cityId: this.location ? this.location.id : '',
					brand: this.form.ppname,
				}
				this.$api.consultAdd(req).then(res => {
					this.isConsult = false;
					uni.hideLoading();
					this.iswin = true;
				})

			},
			decryptPhoneNumber(e) {
				if (e.detail.errMsg == "getPhoneNumber:ok") {
					this.$api.userWxGetPhone({
						encryptedData: e.detail.encryptedData,
						iv: e.detail.iv
					}).then(res => {
						if (res.code == 200) {
							this.form.phone = res.data;
							let user = uni.getStorageSync('user');
							user = user ? user : {};
							user.phone = phone;
							uni.setStorageSync('phone', phone);
							this.$store.commit('updataUser', user);



						}
					})
				} else {
					uni.showToast({
						icon: 'none',
						title: '获取失败'
					})
				}


			},
		}
	}
</script>

<style lang="scss" scoped>
	.pages_intelligence {
		width: 100%;
		min-height: 100vh;
		background-color: #F5F5F5;
		border-top: .01rpx solid transparent;
		box-sizing: border-box;

		.winBigBox {
			width: 638rpx;
			height: 432rpx;
			background: #fff;
			opacity: 1;
			border-radius: 24rpx;
			position: absolute;
			top: 50%;
			left: 50%;
			transform: translate(-50%, -50%);
			box-sizing: border-box;
		}

		.winBottonBox {
			border-top: 1rpx solid #F5F5F5;
			height: 108rpx;
			line-height: 108rpx;
			text-align: center;
			font-size: 32rpx;
			font-family: 蘋方-簡;
			font-weight: bold;
			color: #333333;
			box-sizing: border-box;

		}

		.winTopBox {
			display: flex;
			flex-direction: column;
			text-align: center;
			justify-content: center;
			align-items: center;
			padding-top: 48rpx;

		}

		.winTopBoxTop {

			image {
				width: 74rpx;
				height: 74rpx;
			}

			view {
				height: 40rpx;
				font-size: 28rpx;
				font-family: 蘋方-簡;
				font-weight: bold;
				line-height: 40rpx;
				color: #333333;
				margin-top: 8rpx;
			}
		}

		.winTopBoxBotton {
			margin-top: 32rpx;
			margin-bottom: 40rpx;
			width: 420rpx;
			font-size: 28rpx;
			font-family: PingFang SC;
			font-weight: 400;
			line-height: 40rpx;
			color: #999999;

		}

		.pages_mainBox {
			width: 100%;
			position: relative;
		}

		.consultBoxHeard {
			height: 50rpx;
			font-size: 36rpx;
			font-family: PingFang SC;
			font-weight: bold;
			line-height: 50rpx;
			color: #000000;
			text-align: center;
			margin-bottom: 40rpx;
		}

		.consultBigBox {
			position: absolute;
			left: 50%;
			top: 50%;
			transform: translate(-50%, -60%);
		}

		.consultBox {
			width: 638rpx;
			height: 730rpx;
			border-radius: 24rpx;
			position: relative;

			overflow: hidden;
			padding: 32rpx;
			box-sizing: border-box;
		}

		.consultBoxCha {
			position: absolute;
			left: 50%;
			bottom: -154rpx;
			transform: translateX(-50%);
			width: 96rpx;
			height: 96rpx;
		}

		.consultBoxBg {
			position: absolute;
			top: 0;
			left: 0;
			width: 100%;
			height: 100%;
			z-index: -1;
		}

		.pages_mainBoxx {
			width: 100%;
			height: 300rpx;
			// background: linear-gradient(180deg, rgba(255, 218, 45, 0) 0%, #FFDF13 100%);
			position: fixed;
			bottom: 0;

			display: flex;
			justify-content: center;
			align-items: center;

			image {
				width: 674rpx;
				height: 130rpx;
			}
		}

		.pages_mainBotton {
			width: 558rpx;
			height: 88rpx;
			line-height: 88rpx;
			text-align: center;
			background: #ffda2d;
			box-shadow: 0px 8rpx 16rpx rgba(255, 218, 45, 0.3);
			border-radius: 24rpx;
			font-size: 28rpx;
			font-family: 蘋方-簡;
			font-weight: bold;
			color: #000000;
		}

		.pages_areaItemsInp {
			height: 40rpx;
			font-size: 28rpx;
			font-family: PingFang SC;
			font-weight: 400;
			line-height: 37rpx;
			color: #999999;
			border: none;
			background-color: transparent;
			display: inline-block;
			width: 260rpx;
			// border: 1rpx solid #CCCCCC;
			opacity: 1;
			border-radius: 8rpx;
			padding: 4rpx;

			&::after {
				content: '';
				border: none;
			}
		}

		.myStyle {
			width: 100% !important;
		}

		.inputItems {
			display: flex;
			align-items: center;
			justify-content: center;
			margin-bottom: 24rpx;
			width: 574rpx;
			height: 88rpx;
			line-height: 88rpx;
			background: rgba(39, 39, 39, 0.03);
			border-radius: 24rpx;

			input {
				width: 100%;
				display: inline-block;
				height: 88rpx;
				line-height: 88rpx;
				font-size: 28rpx;
				font-family: PingFang SC;
				font-weight: 400;
				color: #999999;
				text-align: center;
			}

			span {
				display: inline-block;
				height: 40rpx;
				font-size: 28rpx;
				font-family: PingFang SC;
				font-weight: 400;
				line-height: 40rpx;
				color: #999999;


			}

			.phoneBox {
				padding: 0 6rpx;
				border: 1rpx solid #CCCCCC;
				border-radius: 8rpx;
			}

			image {
				width: 24rpx;
				height: 24rpx;
			}
		}

		.consultBoxBotton {
			width: 558rpx;
			height: 88rpx;
			line-height: 88rpx;
			background: #ffda2d;
			opacity: 1;
			border-radius: 24rpx;
			text-align: center;
			font-size: 28rpx;
			font-family: 蘋方-簡;
			font-weight: bold;
			color: #000000;
			margin-top: 56rpx;
		}

		.bigKhBg {
			width: 100%;
		}
	}
</style>
